<route lang="json5">
{
  meta: {
    auth: true,
    label: '写点啥呢写点啥呢',
  },
}
</route>

<template>
  <div class="relative h-full">
    <div class="w-full h-full overflow-x-hidden p-2 flex flex-col gap-y-1 items-start">
      <a-button @click="handleTransCode">生成二维码</a-button>
      <a-button @click="handleTransAES">AES加/解密</a-button>
      <a-button @click="handleOpenPage">打开一个组件（fullscreen）</a-button>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { useQRCode } from '@vueuse/integrations/useQRCode'
import { Icon } from '@iconify/vue'
import PageTableEdit from '@/pages/table/[id].vue'

function handleTransCode() {
  const text = ref('')
  const qrCode = useQRCode(text, {
    rendererOpts: 0.2,
  })
  Modal.open({
    title: '二维码生成',
    draggable: true,
    footer: false,
    content: () => (
      <>
        <a-input v-model={text.value} placeholder='输入内容' />
        <a-image src={qrCode.value} />
      </>
    ),
  })
}

function handleTransAES() {
  const source = ref('')
  const target = ref('')
  const key = ref('')
  Modal.open({
    title: 'AES加/解密',
    draggable: true,
    footer: false,
    content: () => (
      <>
        <a-input
          v-model={key.value}
          onBlur={() => {
            if (key.value && key.value.length % 4 !== 0) {
              key.value = ''
            }
          }}
          placeholder='这里输入秘钥'
        />
        <div class='flex '>
          <a-textarea
            v-model={source.value}
            auto-size={{ minRows: 6, maxRows: 15 }}
            placeholder='需要加密的字符串 / 解密结果'
            allow-clear
          />
          <div class='flex flex-col justify-center'>
            <a-button
              onClick={() => {
                if (key.value) target.value = AESEncode(source.value, key.value)
              }}>
              {{
                icon: () => <Icon class='h-6 w-6 ' icon='icon-park-twotone:right-one' />,
              }}
            </a-button>
            <a-button
              onClick={() => {
                if (key.value) source.value = AESDecode(target.value, key.value)
              }}>
              {{
                icon: () => <Icon class='h-6 w-6 ' icon='icon-park-twotone:left-one' />,
              }}
            </a-button>
          </div>
          <a-textarea
            v-model={target.value}
            auto-size={{ minRows: 6, maxRows: 15 }}
            placeholder='需要解密的字符串 / 加密结果'
            allow-clear
          />
        </div>
      </>
    ),
  })
}

function handleOpenPage() {
  Modal.open({
    title: 'page-table-edit/add',
    footer: false,
    fullscreen: true,
    content: () => <PageTableEdit id={'add'} />,
  })
}
</script>
